<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <!--<link rel="stylesheet" href="API/css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <!--<script type="text/javascript" src="API/js/highcharts.js"></script>-->
    <!--<script type="text/javascript" src="API/js/modules/exporting.js"></script>-->
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="API_RH/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>
	
    <script language="javascript" type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 28;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //A la construction de la page
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();
        } catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    $(document).on('pageshow',function() {
        try {
            show_commun();
        } catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });
		
    //Fin chargement page
    function OnLoad() {
        try {
            // Init commmun
            init_commun();

            // Fin affichage commun
            show_commun();

            afficher_listes();
            charger_listeUsers();
        } catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }
		
    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {type}
     */
    function afficher_listes() {
        try {
            $("#div_Listes").text("");

            var tabListesUsers = new Array();
            tabListesUsers = getListesUsersByPropri(auth);

            for (var indice in tabListesUsers) {
                var strRetour = "";
                strRetour += "<label for=\"liste_"+tabListesUsers[indice]["id"]+"\">"+tabListesUsers[indice]["titre"]+"</label>";
                strRetour += "<SELECT name=\"liste_"+tabListesUsers[indice]["id"]+"\" id=\"liste_"+tabListesUsers[indice]["id"]+"\" data-mini=\"true\" multiple=\"multiple\" data-native-menu=\"false\" size=\"4\" onchange=\"majListe('"+tabListesUsers[indice]["1"]+"')\">";
                strRetour += "<option value=\"\" data-placeholder=\"true\">"+tabListesUsers[indice]["titre"]+"</option>";

                var tabUsers = new Array();
                tabUsers = getUsersInListe(tabListesUsers[indice][0]);
                for (var indice0 in tabUsers) {
                    var strSelected = "";
                    if(tabUsers[indice0]["selected"] == "1"){
                        strSelected = "selected";
                    }
                    strRetour += "<option value=\""+tabUsers[indice0]["code_user"]+"\" "+strSelected+" >"+tabUsers[indice0]["nom"]+" "+tabUsers[indice0]["prenom"]+"</option>";
                }

                strRetour += "</SELECT>";
				
                $("#div_Listes").append(strRetour).trigger('create');
            }
        } catch (er) {
            log(0, "ERROR(afficher_listes):" + er.message);
        }
    }

    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {type}
     */
    function majListe(p_id_liste) {
        try {
            var strSQL = "DELETE FROM tab_listes_users_contenus WHERE 1=1 AND id_listes_users = "+p_id_liste+";";
            deleteSQL(strSQL);
			
            var tabUsers = new Array();
            tabUsers = $("#liste_"+p_id_liste).val();

            if(tabUsers == null){
                var strSQL = "DELETE FROM tab_listes_users WHERE 1=1 AND id = "+p_id_liste+";";
                deleteSQL(strSQL);
                $("#liste_"+p_id_liste).selectmenu("close");
                $("#liste_"+p_id_liste).remove();
                $('label[for="liste_'+p_id_liste+'"]').remove();
            }else{
                var strSQL = "INSERT INTO `tab_listes_users_contenus` VALUES ";
                for (var indice in tabUsers) {
                    strSQL += "(NULL ,  '"+p_id_liste+"',  '"+tabUsers[indice]+"'),";
                }

                strSQL = strSQL.substring(0,strSQL.length-1);
                strSQL += ";";

                insertSQL(strSQL);
            }
        } catch (er) {
            log(0, "ERROR(afficher_listes):" + er.message);
        }
    }
	
    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {type}
     */
    function charger_listeUsers() {
        try {
            var myObj = document.getElementById("listeUsers");

            var tabUsers = new Array();
            tabUsers = getUsersInListe(0);

            for (var indice in tabUsers) {
                myObj.options[myObj.options.length] = new Option((tabUsers[indice]["nom"]+" "+tabUsers[indice]["prenom"]),tabUsers[indice]["code_user"]);
            }

            $("#listeUsers").selectmenu('refresh', true);
        } catch (er) {
            log(0, "ERROR(charger_listeUsers):" + er.message);
        }
    }
	
    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {type}
     */
    function ajouterListe() {
        try {
            var tabUsers = new Array();
            tabUsers = $("#listeUsers").val();

            var strNomListe = $("#nomListe").val();

            if((tabUsers != null)&&((strNomListe != null)||(strNomListe != ""))){
                var strSQL = "INSERT INTO `tab_listes_users` (`id` ,`titre` ,`code_user`) VALUES (NULL ,  '"+$("#nomListe").val()+"',  '"+auth+"');";
                insertSQL(strSQL);

                var strSQL = "SELECT id FROM `tab_listes_users` order by id desc LIMIT 0 , 1;";
                var maxId = getSQL(strSQL)[0][0];

                var strSQL = "INSERT INTO `tab_listes_users_contenus` VALUES ";
                for (var indice in tabUsers) {
                    strSQL += "(NULL ,  '"+maxId+"',  '"+tabUsers[indice]+"'),";
                }

                strSQL = strSQL.substring(0,strSQL.length-1);
                strSQL += ";";

                insertSQL(strSQL);

                location.reload();
            }else{
                $("#id_msgRetour").html('Mauvaises entr&eacute;es pour cr&eacute;er la liste.');
            }
        } catch (er) {
            log(0, "ERROR(afficher_listes):" + er.message);
        }
    }
		
    ///////////////////
    //BLOCK FONCTIONS BD
    ///////////////////


    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
		
    </script>

  </head>
  <body onload="OnLoad();">
    
    <!-- page -->
    <div data-role="page" data-title="Administration des listes - Outil d'audit Automatique">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed" data-theme="c">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" data-theme="c" id="main_content">

            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false" data-mini="true">
                <h4>Mes listes</h3>
                <FORM method="post" id="formListes" action="#">
                    <div id="div_Listes">Pas de r&eacute;sultat.</div>
                </FORM>
            </div>

            <div data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false" data-mini="true">
                <h4>Nouvelle liste</h3>
                <FORM method="post" id="formNewListe" action="#">
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <label for="nomListe">Nom de la liste :</label>
                            <input type="text" name="nomListe" id="nomListe" value="" placeholder="Le nom de votre liste"/>
                        </div>
                        <div class="ui-block-b">
                            <label for="listeUsers">Liste des utilisateurs</label>
                            <SELECT name="listeUsers" id="listeUsers" multiple="multiple" data-mini="true" data-native-menu="false">
                                <option value="" data-placeholder="true">Les utilisateurs</option>
                            </SELECT>
                        </div>
                    </div>	
                    <a href="javascript:ajouterListe();" data-role="button" data-inline="true" data-icon="arrow-r" data-mini="true">Ajouter cette liste</a>
                </FORM>
                <label id="id_msgRetour"></label>
            </div>

        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed" data-theme="c">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="c" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
  </body>
</html>